<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>5.一个重要的内置关系</title>
    <!--  引入Vue  -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
    一个重要的内置关系: VueComponent.prototype.__proto__ === Vue.prototype
    从而达到 让组件实例对象vc 也可以访问到Vue原型上的属性、方法
-->
<!--
   实例的 隐式原型对象永远指向自己缔造者的原型对象
   -->
    <!--  准备好一个容器  -->
    <div id="root">
        <school></school>
    </div>
</body>

<script type="text/javascript">

    //定义一个构造函数
    function Demo(name,age){
        this.a = 1;
        this.b = 2;
    }

    //创建一个对象
    var d = new Demo();
    console.log(d.__proto__);//隐式原型对象
    console.log(Demo.prototype);//显示原型对象
    console.log(d.__proto__ === Demo.prototype);//true

    //程序员通过显式原型属性操作原型对象, 追加一个x属性,值为99
    Demo.prototype.x=99;

    console.log(d.__proto__.x)
    console.log(d.x)
    console.log(d)



    //第一步:创建school组件
    const school = Vue.extend({
        //extend里不能写el配置项,所有的组件被vm管理,由vm决定服务于哪个容器
        // el:"#root",
        template: `
          <div>
            <h2>学校名称:{{ schoolName }}</h2>
            <h2>学校地址:{{ address }}</h2>
            <button @click="showX">点我输出x</button>
          </div>
        `,
        data() {
            return {
                schoolName: "尚硅谷",
                address: "北京"
            }
        },
        methods:{
            showX(){
                console.log(this.x)
            }
        }
    })

    const  vm = new Vue({
        el: "#root",
        data() {
        },
        data:{
            msg:"hello"
        },
        components: {
            school
        }
    })

    console.log(school.prototype.__proto__ === Vue.prototype )

    //在Vue的原型上追加99
    Vue.prototype.x = 99

</script>
</html>